<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-steps :active="active" finish-status="success">
          <el-step title="请输入你要录入的路线名称"></el-step>
          <el-step title="请选择课程"></el-step>
          <el-step title="请确定保存的路线"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="24" v-show="active==0">
        <el-form ref="form" :model="routeForm" label-width="80px">
          <el-form-item label="路线名称">
            <el-input v-model="routeForm.routeName"></el-input>
          </el-form-item>
          <el-form-item label="描述信息">
            <el-input type="textarea" v-model="routeForm.routeDescribe"></el-input>
          </el-form-item>
          <el-form-item label="学习人数">
            <el-input-number v-model="routeForm.peopleNum" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="课程时长">
            <el-input-number v-model="routeForm.classHours" :min="0" :max="10000" :precision="2" :step="0.1"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary" @click="onSubmitRouteForm">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="24" v-show="active==1">
        <el-col :span="12">
          <el-tag type="success">请输入</el-tag>
          <el-input v-model="inputRouteName" ref="mark" placeholder="请输入内容" style="width:40%;"></el-input>
          <el-transfer
            style="text-align: left; display: inline-block"
            filterable
            :titles="['全部课程', '目标课程']"
            :button-texts="['到左边', '到右边']"
            :filter-method="filterMethod"
            filter-placeholder="请输入检索首字母"
            v-model="classValue"
            :data="classData"
          ></el-transfer>
          <div style="text-align: end;
    width: 86%;
    margin-top: 10px;">
            <el-button size="small" type="primary" @click="unBuildSteps">取消上次生成</el-button>
            <el-button size="small" type="success" @click="buildSteps">生成此步骤</el-button>
          </div>
        </el-col>

        <!-- 时间线 -->
        <el-col :span="12">
          <el-steps direction="vertical" :activeStep="activeStep" finish-status="success">
            <el-step
              v-for="(activity, index) in activities"
              :key="index"
              :title="activity.title"
              :description="activity.description"
            ></el-step>
          </el-steps>
        </el-col>

        <el-button @click="proBack()">上一步</el-button>
        <el-button type="primary" @click="nextEnd()">下一步</el-button>
      </el-col>
      <el-col :span="24" v-show="active==2">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form ref="form" :model="routeForm" label-width="80px" :disabled="true">
              <el-form-item label="路线名称">
                <el-input v-model="routeForm.routeName"></el-input>
              </el-form-item>
              <el-form-item label="描述信息">
                <el-input type="textarea" v-model="routeForm.routeDescribe"></el-input>
              </el-form-item>
              <el-form-item label="学习人数">
                <el-input-number v-model="routeForm.peopleNum" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="课程时长">
                <el-input-number v-model="routeForm.classHours" :min="0" :max="10000" :precision="2" :step="0.1"></el-input-number>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :span="12">
            <el-steps direction="vertical" :activeStep="activeStep" finish-status="success">
              <el-step
                v-for="(activity, index) in activities"
                :key="index"
                :title="activity.title"
                :description="activity.description"
              ></el-step>
            </el-steps>
          </el-col>
        </el-row>
        <el-button @click="proBack()">上一步</el-button>
        <el-button type="primary" @click="routeSave()">确认保存</el-button>
      </el-col>
       <el-col :span="24" v-show="active==3">
        <el-card class="box-card" style="width:80%;margin:20px auto">
          <h1>保存成功</h1>
          <el-button type="primary" @click="addAgian">继续添加</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputRouteName: "",
      rightValueClassId: [],
      classData: [],
      classValue: [],
      className: [],
      recoveryClassData: [],
      activities: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      activeStep: 0,
      active: 0,
      routeForm: {
        routeName: "",
        routeDescribe: "",
        peopleNum: 0,
        classHours: 0,
        classNum: 0
      },
      submitDataRoute:{}
    };
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.generateData();
  },
  methods: {
    addAgian(){
      //清空所有数据
      this.inputRouteName="";
      this.rightValueClassId = [];
      this.classData=[];
      this.classValue=[];
      this.className=[];
      this.recoveryClassData=[];
      this.activities=[];
      this.activeStep=0;
      this.active=0;
      this.routeForm.routeName="";
      this.routeForm.routeDescribe = ""
      this.routeForm.peopleNum=0
      this.routeForm.classHours=0
      this.routeForm.classNum=0
      this.submitDataRoute={};
      this.generateData();
    },
    routeSave(){
       this.$confirm("将要提交此路线信息，需要一小段时间，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/ly/studyroute/save/baseValuse"),
            method: "post",
            data: this.$http.adornData(this.submitDataRoute, false)
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                type: "success",
                message: "新增路线成功!"
              });
              this.active = 3;
            } else {
              this.$message({
                type: "error",
                message: "保存失败，原因【" + data.msg + "】"
              });
            }
          });
        })
        .catch(e => {
          console.log(e);
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    nextEnd() {
      this.active = 2;
      this.submitDataRoute = {routeForm:this.routeForm,activities:this.activities};
      console.log("提交的数据为", JSON.stringify(this.submitDataRoute));
    },
    unBuildSteps() {
      this.activities.pop(this.activities.length - 1);
      if (this.activeStep-- < 0) this.activeStep = 0;
      if (this.recoveryClassData && this.recoveryClassData.length > 0) {
        var len = this.recoveryClassData[this.recoveryClassData.length - 1].len;
        for (let i = 0; i < len; i++) {
          this.classData.push(
            this.recoveryClassData.pop(this.recoveryClassData.length - 1).data
          );
        }
      }
    },
    //生成时间线的信息
    buildSteps() {
      if (!this.inputRouteName || this.inputRouteName == "") {
        this.$refs["mark"].focus();
        return;
      }
      if(!this.classValue || this.classValue == null || this.classValue.length<1){
         this.$message({
                type: "error",
                message: "请选择课程到右边"
          });
          return;
      }
      //课程id数组
      //生成一个卡片放到
      let indexData = [];
      console.log("this.classData", this.classData);
      console.log("this.classValue", this.classValue);
      this.classData.forEach((item, index) => {
        this.classValue.forEach(key => {
          if (item.key == key) {
            indexData.push(index);
          }
        });
      });
      indexData.sort((a, b) => {
        return b - a;
      });
      indexData.forEach(index => {
        this.recoveryClassData.push({
          len: indexData.length,
          data: this.classData[index]
        });
        this.classData.splice(index, 1);
      });
      //this.classValue查数据库获得最新的课程
      this.$http({
        url: this.$http.adornUrl("/ly/classcourse/list/info"),
        method: "post",
        data: this.$http.adornData(this.classValue, false)
      }).then(({ data }) => {
        data.data.forEach(item => {
          this.className.push(item.courseName);
        });

        this.activities.push({
          title: this.inputRouteName,
          courseId: this.classValue,
          description: "课程为->" + this.className.join("-")
        });
        this.classValue = [];
        this.inputRouteName = "";
        this.activeStep++;
        this.className = [];
      });
    },
    //第二步里获取所有课程
    generateData() {
      const dataSrs = [];
      const clourse = [];
      const pinyin = [];
      this.$http({
        url: this.$http.adornUrl("/ly/classcourse/list/all"),
        method: "get",
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        data.data.forEach((item, index) => {
          clourse.push({ name: item.name, courseId: item.courseId });
          pinyin.push(item.firstLetter);
        });
        clourse.forEach((city, index) => {
          dataSrs.push({
            label: city.name,
            key: city.courseId,
            pinyin: pinyin[index]
          });
        });
        this.classData = dataSrs;
        console.log("this.classData", this.classData);
      });
    },
    //第一步里的提交
    onSubmitRouteForm() {
      console.log("submit!", this.routeForm);
      this.next();
    },
    next() {
      if (this.active++ > 3) this.active = 0;
    },
    proBack() {
      if (this.active-- < 0) this.active = 0;
    }
  }
};
</script>

<style>
.el-step.is-vertical .el-step__title {
  color: cornflowerblue;
  font-size: 20px;
}
</style>